<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('值班选择')"/>
        <th:block th:include="include :: ztree-css"/>
        <th:block th:include="include :: jquery-editable-select"/>
    </head>
    <style>
        body {
            height: auto;
            font-family: "Microsoft YaHei";
        }

        button {
            font-family: "SimSun", "Helvetica Neue", Helvetica, Arial;
        }

        .shortselect{
            background:#fafdfe;
            height:28px;
            width:180px;
            line-height:28px;
            border:1px solid #9bc0dd;
            -moz-border-radius:2px;
            -webkit-border-radius:2px;
            border-radius:2px;
        }


    </style>
    <body class="hold-transition box box-main">

        <div class="ibox-content">
            <form class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-2 control-label">值班人员:</label>
                    <span class="col-sm-2">
                   [[${userName}]]
               </span>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">值班日期:</label>
                    <span class="col-sm-2" id="date">

               </span>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">值班班次:</label>
                    <span class="col-sm-2" >
                        <select id="duty" class="shortselect" th:with="types=${@dutyTypeService.selectBizDutyTypeList()}">
                            <option th:each="t : ${types}" th:text="${t.dutyTypeName}" th:value="${t.dutyTypeName}" ></option>

                        </select>
                    </span>
                </div>
            </form>
        </div>


        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: ztree-js"/>
        <th:block th:include="include :: jquery-editable-select"/>
        <script th:inline="javascript">

            const year  = [[${bizDuty.year}]]
            const month = [[${bizDuty.month}]]
            let day     = [[${day}]]
            day         = day.replace('day', '')
            day         = +day < 10 ? '0' + day : day
            const date  = year + '年' + month + '月' + day + '日'
            $('#date').html(date)

           $(function (){
               $('#duty').editableSelect({
                                             effects: 'slide'
                                         });
           })
        </script>
    </body>
</html>